<template>
    <div>
        <div>
            <button @click="excute()">更新今日数据</button>
        </div>

        <div id="main"></div>
    </div>
</template>

<script>
import {mapState} from "vuex";
import { excuteTuyere,findTuyere } from "@/api/tuyere";
import {convertToChineseUnit} from "@/common/utils";


export function sortObjectByValueDesc(obj) {
    if (!obj) return {};

    const entries = Object.entries(obj);

    entries.sort((a, b) => a[1] - b[1]);

    return Object.fromEntries(entries);
}


export default {
    data(){
        return {
            myChart: null
        }
    },
    computed:{
      ...mapState('app',['sectors'])
    },
    mounted(){

      var chartDom = document.getElementById('main');

      var myChart = echarts.init(chartDom);

      this.myChart = myChart;

      this.find()

    },
    methods:{
        excute(){
            excuteTuyere().then(res=>{

                if(res.code === 0){
                    if (!this.$route.query.date){
                        this.updateChart(res.data)
                    }
                }



            })
        },
        find(){

            findTuyere({
                date:this.$route.query.date
            }).then(res=>{

                this.updateChart(res.data)

            })
        },
        updateChart(data){


                let yAxisData = [];
                let seriesData = [];

                let chart = sortObjectByValueDesc(data.chart)

                for(let a in chart){
                    let sector = this.sectors.find(b=> b.code === a)
                    if (sector){
                        yAxisData.push(sector.name)
                        seriesData.push({
                            value: data.chart[a],
                            itemStyle:{
                                color: data.chart[a]>0?"red":"green"
                            },
                            label: {
                                position: data.chart[a]>0?"left":"right"
                            }
                        })
                    }
                }

                var option = {
                    title: {
                        text: data.title
                    },
                    // tooltip: {
                    //     show: true,
                    //     trigger: 'axis',
                    //     axisPointer: {
                    //         type: 'shadow'
                    //     }
                    // },
                    tooltip: {
                        show: true,
                        formatter(params){

                        console.log(params)

                        let color = 'green'

                        if (params.value > 0){
                            color = 'red'
                        }

                        return `<b>${params.name}</b>
                        <p style="color:${color}">
                            <i style="border:1px solid ${color};vertical-align:sub;display:inline-block;width:12px;height:12px;margin-right:5px;background:${params.color}"></i>
                            ${convertToChineseUnit(Math.abs(params.value))}</p>`
                        }

                    },
                    grid: {
                        top: 80,
                        bottom: 30
                    },
                    xAxis: {
                        type: 'value',
                        position: 'top',
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        axisLine: { show: true },
                        axisLabel: { show: true },
                        axisTick: { show: true },
                        splitLine: { show: true },
                        data: yAxisData
                    },
                    series: [
                        {
                            name: 'Cost',
                            type: 'bar',
                            stack: 'Total',
                            label: {
                                show: true,
                                formatter: '{b}',
                                position: 'inside'
                            },
                            data: seriesData
                    }]
                };



                this.$nextTick(()=>{


                    this.myChart.resize({
                        height: this.sectors.length * 44
                    })

                    this.myChart.setOption(option);
                })


        }
    }
}
</script>
